<!-- 项目筛选 -->
<template>
	<view class="project-head">
		<view
			class="sort"
			:class="sort.val === sortBy ? 'active' : ''"
			v-for="sort in sortList"
			:key="sort.val"
			@click="onclickSort(sort)"
		>
			{{ sort.label }}
			<view class="sort-icon">
				<u-icon
					style="transform: translateY(2px);"
					name='arrow-up-fill'
					size="10"
					:color="sort.val === sortBy && orderBy==='ASC' ? '#6782f1' : '#c9c8ca'"
				/>
				<u-icon
					name='arrow-down-fill'
					size="10"
					:color="sort.val === sortBy && orderBy==='DESC' ? '#6782f1' : '#c9c8ca'"
				/>
			</view>
		</view>
		<view
			class="u-flex-1 filter"
			:style="{
				'color': filter ? '#6782f1' : '#c9c8ca'
			}"
			@click="filterChange"
		>
			筛选
			<u-icon
				style="margin-left: 5px;"
				custom-prefix="icon"
				size="22"
				name="list-dot"
				:color="filter ? '#6782f1' : '#c9c8ca'"
			/>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    filterProjectType: { // 是否需要筛选项目类型
      type: Boolean,
      default: false
    },
    showSearch: { // 展示搜索按键
      type: Boolean,
      default: false
    },
    projectType: { // 项目类型
      type: String,
      required: true
    }
  },

  data() {
    return {
      sortList: [
        { label: '信用', val: 'comment' },
        { label: '价格', val: 'price' },
        { label: '发布时间', val: 'time' },
      ],
      sortBy: '',
      orderBy: 'DESC', // 排序方式 desc降序, asc升序
      filter: null,
      isFiltering: false, // 是否展示筛选弹窗
    }
  },
  mounted() {
    this.projectType !== 'competition' && this.onclickSort({ val: 'time' })
  },
  methods: {
    /**
     * 确定排序模式
     */
    onclickSort(sort) {
      if (sort.val !== this.sortBy) {
        this.sortBy = sort.val
        this.orderBy = 'DESC'
      } else {
        this.orderBy = this.orderBy === 'DESC' ? 'ASC' : 'DESC'
      }
      this.$emit('sortChange', {
        sortBy: this.sortBy,
        orderBy: this.orderBy
      })
    },
    /**
     * 筛选改变
     */
    filterChange(e) {
      this.filter = e
      this.$emit('filterChange', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size:30rpx;
  text-align: center;
  padding: 20rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;

  .sort {
     display: flex;
      align-items: center;
      justify-content: space-between;
    .sort-icon {
      display: flex;
      flex-direction: column;
      margin: 1px 0 0 5px;
    }
  }
  .filter{
    display: flex;
  }

  .active {
    color:#007AFF ;
  }
}
</style>
